<script setup lang="ts">
import {ref} from "vue";
import { top5 } from "../index";

// 表格列定义
const tableColumns = [
    {label: "纠纷类型", prop: "jflx"},
    {label: "数量及占比", prop: "zb"},
    {label: "高发地区", prop: "dq"},
]

// 示例数据
// const tableData = ref([
//     {jflx: "邻里纠纷", zb: '47890件 (16.18%)', dq: "玉溪",},
//     {jflx: "山林土地纠纷", zb: '41051件(13.87%)', dq: "昆明",},
//     {jflx: "损害赔偿纠纷", zb: '30605件(10.34%)', dq: "保山",},
//     {jflx: "合同纠纷", zb: '29421件(9.94%)', dq: "临沧",},
//     {jflx: "道路交通事故纠纷", zb: '21222件(7.17%)', dq: "无",},
//   ]);

</script>

<template>
  <div class="right-top-container">
    <!-- 表格 -->
    <div class="custom-table">
      <table>
        <thead>
        <tr>
          <th v-for="col in tableColumns" :key="col.prop">{{ col.label }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in top5" :key="row.jflx">
          <td v-for="col in tableColumns" :key="col.prop">{{ row[col.prop] ||'-'}}</td>
        </tr>
        </tbody>
      </table>
      <div v-if="top5.length === 0" class="empty-text">暂无数据</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.right-top-container {
  background: rgba(10, 32, 70, 0.95);
  border-radius: 10px;
  padding: 16px 12px 12px 12px;
  color: #7eb7fd;
  font-size: 15px;
}

.custom-tabs {
  display: flex;
  margin-bottom: 12px;

  .tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    margin-right: 8px;
    background: rgba(31, 99, 163, 0.2);
    border-radius: 6px 6px 0 0;
    color: #7eb7fd;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      background: linear-gradient(90deg, #1f63a3 60%, #092a4a 100%);
      color: #ffd700;
      font-weight: bold;
    }
  }
}

.custom-table {
  background: rgba(31, 99, 163, 0.12);
  border-radius: 6px;
  height: 220px;
  overflow: auto;
  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      border-bottom: 1px solid rgba(31, 99, 163, 0.2);
      padding: 6px 8px;
      text-align: center;
      color: #7eb7fd;
    }

    th {
      color: #7eb7fd;
      font-weight: 600;
      background: rgba(31, 99, 163, 0.18);
    }

    tr:last-child td {
      border-bottom: none;
    }
  }

  .empty-text {
    text-align: center;
    color: #888;
    padding: 16px 0;
  }
}
</style>
